<template>
  <div>
    <my-header></my-header>
    <div class="top-block"></div>
    <!-- 导师信息 -->
    <div class="tutorInfo">
      <div>
        <div class="photo"><img :src="parentInfo.touxiang == null?'http://xmoa.hzhuishi.cn/uploads/image/noimage.jpg':parentInfo.touxiang" alt=""></div>
        <div class="txt">
          <div class="name">{{parentInfo.username}}</div>
          <div class="tel">手机号：{{parentInfo.tel}}</div>
        </div>
        <div class="identity"><span>我的导师</span></div>
      </div>
    </div>
    <!-- 我的推广 -->
    <div to="" class="wagesInfo">
      <mt-cell title="我的推广"></mt-cell>
      <div class="flex">
        <div>
          <span>销售佣金</span>
          <span class="money">{{wagesDetail.xiaoshou_fee}}</span>
        </div>
        <div>
          <span>培训津贴</span>
          <span class="money">{{wagesDetail.peixun_fee}}</span>
        </div>
        <div>
          <span>团队管理</span>
          <span class="money">{{wagesDetail.guanli_fee}}</span>
        </div>
        <div>
          <span>伯乐奖</span>
          <span class="money">{{wagesDetail.bole_fee}}</span>
        </div>
      </div>
      <button class="mint-button" @click="actionSheet">
                <label class="mint-button-text">{{date}}</label>
              </button>
      <mt-actionsheet :actions="actions" v-model="sheetVisible">
      </mt-actionsheet>

    </div>





    <!-- navbar 客户-团队 -->
    <mt-navbar v-model="selected">
      <mt-tab-item class="tabItem" id="customer">玩家</mt-tab-item>
      <mt-tab-item class="tabItem" id="team">团队</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <!-- 客户 -->
      <mt-tab-container-item id="customer">
        <div class="flex">
          <div class="flex-item" @click="goCustomDetail(0)">
            <div>{{teamDetail.w_num}}</div>
            <div>玩家</div>

          </div>
        </div>


      </mt-tab-container-item>

      <!-- 团队 -->
      <mt-tab-container-item id="team">

        <div class="flex">
          <div class="flex-item" @click="goCustomDetail(3)">
            <div>{{teamDetail.m_num}}</div>
            <div>高级</div>
          </div>

          <div class="flex-item" @click="goCustomDetail(2)">
            <div>{{teamDetail.p_num}}</div>
            <div>顾问</div>
          </div>

          <div class=" flex-item" @click="goCustomDetail(1)">
            <div>{{teamDetail.s_num}}</div>
            <div>见习</div>
          </div>

        </div>

      </mt-tab-container-item>


    </mt-tab-container>


    <div class="bottom-block"></div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import {get_parent_info,get_wages_details,get_team_details} from '@/api/';
  export default {
    data() {
      return {
        tel:'',
        parentInfo:'',//导师信息
        wagesDetail:'',//佣金详情
        teamDetail:'',//团队详情
        selected: 'customer',
        showOpen1: true,
        showOpen2: true,
        date:'今日',
        actions: [{
            name: '今日',
            method: this.getToday // 调用methods中的函数
          },
          {
            name: '本月',
            method: this.getMonth // 调用methods中的函数
          },
          {
            name: '累计',
            method: this.getCumulative
          }
        ],
        // action sheet 默认不显示
        sheetVisible: false
      }
    },
    components: {
    },
    methods: {
      actionSheet: function() {
        // 打开action sheet
        this.sheetVisible = true;
      },
      getToday: function(e) {
        this.date = e.name;
        get_wages_details({tel:this.tel,type:1}).then(res =>{
          this.wagesDetail = res.data;
        })
      },
      getMonth: function(e) {
        this.date = e.name;
        get_wages_details({tel:this.tel,type:2}).then(res =>{
          this.wagesDetail = res.data;
        })
      },
      getCumulative: function(e) {
        this.date = e.name;
        get_wages_details({tel:this.tel,type:0}).then(res =>{
          this.wagesDetail = res.data;
        })
      },
      goCustomDetail(id){
        this.$router.push('/customDetail?id='+id)
      },
      getParentInfo(){ //获取导师信息
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_parent_info({tel:this.tel}).then(res =>{
          // console.log(res)
          this.parentInfo = res.data.puserinfo;
        })
      },
      getWagesDetail(){//获取佣金详情
        get_wages_details({tel:this.tel,type:1}).then(res =>{
          // console.log(res)
          this.wagesDetail = res.data;
        })
      },
      getTeamDetail(){//获取团队详情
        get_team_details({tel:this.tel}).then(res =>{
          // console.log(res)
          this.teamDetail = res.data;
        })
      }
    },
    mounted() {
      this.getParentInfo();
      this.getWagesDetail();
      this.getTeamDetail();
    }
  }
</script>

<style scoped>
  /deep/ .mint-cell-title {
    font-size: 14px;
    font-weight: bold;
  }

  .tutorInfo {
    background: #2f3953;
    padding: 15px 0 70px 0;
  }

  .tutorInfo>div {
    display: flex;
    width: 96%;
    margin: 0 auto;
    background: rgb(252, 230, 179);
    border-radius: 8px;
    text-align: start;
    align-items: center;
    height: 70px;
  }

  .tutorInfo>div .photo {
    flex: 1;
  }

  .tutorInfo>div .photo>img {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    display: inline-block;
    border-radius: 50%;
  }

  .tutorInfo>div .txt {
    flex: 3;
    color: #2F3953;
  }

  .tutorInfo>div .txt .name {
    font-size: 14px;
  }

  .tutorInfo>div .txt .tel {
    font-size: 12px;
  }

  .tutorInfo>div .identity {
    flex: 2;
    font-size: 12px;
    color: #e7cd8f;
  }

  .tutorInfo>div .identity>span {
    width: 93px;
    height: 30px;
    background-color: #3a3732;
    display: inline-block;
    border-radius: 20px;
    text-align: center;
    line-height: 30px;
  }

  /* 我的推广 */
  /deep/ .wagesInfo {
    border-radius: 6px;
    background: #fff;
    margin-top: -3em;
    width: 96%;
    margin: 0 auto;
    text-align: start;
  }

  .wagesInfo .mint-cell .mint-cell-text {
    font-size: 14px;
    color: #333;
  }

  .wagesInfo .mint-cell {
    margin-top: -2em;
    background: #FFFFFF;
    border-radius: 6px;
  }

  .wagesInfo .mint-cell-value .right {
    position: absolute;
    right: 3em;
    font-size: 12px;
    top: 1.5em;
  }

  .wagesInfo .flex div span {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #666666;
  }

  .wagesInfo .flex div .money {
    font-size: 18px;
    color: #ff9c4c;
    margin: 8px 0 0;
  }

  .mint-button {
    font-size: 12px;
    color: #999;
    height: 28px;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #f8f8f8;
    margin-top: 11px;
  }

  /* 绩效指标 */
  .achievements {
    text-align: start;
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 1em;
  }

  .achievements>div {
    padding: 11px 16px;
    border-radius: 8px;
  }

  .achievements>div .title {
    margin-bottom: 7px;
  }

  .achievements .item-content {
    font-size: 12px;
    color: #666666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
  }

  .achievements .sumary1 {
    margin-top: 15px;
  }

  .item-open {
    display: flex;
    align-items: center;
  }

  .item-open>img {
    width: 9px;
    height: 5px;
    line-height: 16px;
    display: inline-block;
    margin-left: 5px;
  }

  .upContent {
    font-size: 12px;
    color: #666666;
  }

  .upContent .up-item {
    height: 54px;
    padding: 10px;
    margin-top: 12px;
    background: #fffaf5;
    position: relative;
  }

  .upContent .up-item .right {
    right: 10px;
    color: #FF9C4C;
  }

  .upContent .up-item .up-bottom,
  .upContent .up-item .up-bottom .right {
    color: #999999;
  }

  .triangleBox {
    width: 10px;
    height: 9px;
  }

  .triangleBox>img {
    width: 100%;
  }

  .lineBox {
    display: flex;
    width: 100%;
    height: 2px;
    margin: 6px 0 4px 0;
    background: #ccc;
    border-radius: 1px;
  }

  .lineBox .speed {
    background-color: rgb(255, 156, 76);
    height: 2px;
    width: 20px;
  }

  /* navtab 团队 客户 */
  /deep/ .mint-navbar {
    width: 96%;
    margin: 0 auto;
    margin-top: 1em;
    background: #fff;
    border-bottom: 2px solid #ccc;
  }

  /deep/ .tabItem .mint-tab-item-label {
    font-size: 16px;
    color: #999;
    font-weight: bold;
  }

  .mint-navbar .is-selected {
    border-bottom: 3px solid #777;
  }

  .mint-tab-container {
    margin-top: 0em;
    width: 96%;
    margin: 0 auto;
    background: #fff;
    margin-bottom: 2em;
    padding-bottom: 1em;
  }
</style>
